<template>
      <div style="text-align: center;background-color: #f1f1f3;height: 100%;padding: 0px;margin: 0px;">
            <h1 style="font-size: 50px; background-color:white;margin-top: 80px">{{ '欢迎您！' + user.name }}</h1>
            <el-descriptions :column="2" border style="text-align: center">
                  <el-descriptions-item label="账号">{{ user.account }}</el-descriptions-item>
                  <el-descriptions-item label="电话">{{ user.phone }}</el-descriptions-item>
                  <el-descriptions-item label="身份证号">{{ user.card }}</el-descriptions-item>
                  <el-descriptions-item label="当前职业">{{ user.occupation }}</el-descriptions-item>
                  <el-descriptions-item label="真实姓名">{{ user.name }}</el-descriptions-item>
                  <el-descriptions-item label="账号信息">
                        <el-button size="small" type="success" @click="modify">修改信息</el-button>
                        <el-button size="small" type="primary" @click="modifyPwd">更改密码</el-button>
                  </el-descriptions-item>
            </el-descriptions>
            <DateUtils style="margin-top: 50px"/>

            <el-dialog
                      v-model="dialogVisible"
                      width="300"
            >
                  <el-form ref="form" :model="form" :rules="rules" label-width="auto" style="max-width: 600px">
                        <el-form-item label="手机号" prop="phone">
                              <el-col :span="22">
                                    <el-input v-model="form.phone"/>
                              </el-col>
                        </el-form-item>
                        <el-form-item label="住址" prop="address">
                              <el-col :span="22">
                                    <el-input v-model="form.address"/>
                              </el-col>
                        </el-form-item>
                        <el-form-item label="职业" prop="occupation">
                              <el-col :span="22">
                                    <el-input v-model="form.occupation"/>
                              </el-col>
                        </el-form-item>
                  </el-form>
                  <template #footer>
                        <div class="dialog-footer">
                              <el-button @click="dialogVisible = false">取消</el-button>
                              <el-button type="primary" @click="doModify">提交</el-button>
                        </div>
                  </template>
            </el-dialog>
            <el-dialog
                      v-model="dialogVisiblePwd"
                      width="300"
            >
                  <el-form ref="form" :model="form" :rules="rules" label-width="auto" style="max-width: 600px">
                        <el-form-item label="新密码" prop="password">
                              <el-col :span="22">
                                    <el-input v-model="form.password"/>
                              </el-col>
                        </el-form-item>
                  </el-form>
                  <template #footer>
                        <div class="dialog-footer">
                              <el-button @click="dialogVisiblePwd = false">取消</el-button>
                              <el-button type="primary" @click="doModify">提交</el-button>
                        </div>
                  </template>

            </el-dialog>
      </div>
</template>

<script>
import DateUtils from "../DateUtils.vue";

export default {
      name: "Home",
      components: {DateUtils},
      data() {
            return {
                  user: {},
                  dialogVisible: false,
                  dialogVisiblePwd:false,
                  form: {
                        id: '',
                        account: '',
                        password: '',
                        card: '',
                        phone: '',
                        address: '',
                        state: '',
                        flag: '',
                        name: '',
                        sex: '',
                        occupation: '',
                  }
            }
      },
      methods: {
            init() {
                  this.user = JSON.parse(sessionStorage.getItem('CurUser'))
                  console.log(JSON.parse(sessionStorage.getItem('CurUser')))
            },
            modify(row) {
                  console.log(row)
                  //      赋值到表单
                  this.dialogVisible = true
                  this.$nextTick(() => {
                        this.form = this.user
                  })
            },
            modifyPwd(row) {
                  console.log(row)
                  //      赋值到表单
                  this.dialogVisiblePwd = true
                  this.$nextTick(() => {
                        this.form = this.user
                  })
            },
            doModify() {
                  this.$axios.post('http://localhost:8088/user/update', this.form).then(res => res.data).then(res => {
                        console.log(res)
                        if (res.code === 200) {
                              this.$message({
                                    message: 'Congrats, this is a success message.',
                                    type: 'success',
                              })
                              this.dialogVisible = false
                              this.dialogVisiblePwd = false
                              return this.$router;
                        } else {
                              // alert("不是200")
                              this.$message({
                                    message: 'Regret, this is a error message.',
                                    type: 'danger',
                              })

                        }
                  })
            }
      },
      created() {
            this.init()
      }
}
</script>

<style scoped>
.el-descriptions {
      width: 90%;

      margin: 0 auto;
      text-align: center;
}
</style>